<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="img-src * data:; default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <title>网页加速控制器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .container {
            text-align: center;
            margin-top: 50px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .test-animation {
            margin: 20px auto;
            width: 50px;
            height: 50px;
            background-color: #3498db;
            animation: bounce 2s infinite;
        }
        .video-container {
            margin: 20px auto;
        }
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(50px); }
        }
        /* 为speed.js的控件添加一些基本样式 */
        ._th_cover-all {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            z-index: 99999 !important;
        }
        /* 确保滑块显示 */
        ._th_cover-all._th_hidden {
            display: block !important;
            opacity: 1 !important;
        }
    </style>
</head>
<body>
<script src="https://speed.imxz.cn:8181/speed.js"></script>
    <div class="container">
        <h1>网页加速控制器</h1>
        <p>此工具允许您控制此页面上的动画、计时器和视频的速度。speed.js将在页面上方显示滑块控件。</p>

        <div class="test-content">
            <h2>测试元素</h2>
            <div class="test-animation"></div>

            <div class="timer-test">
                <h3>计时器测试</h3>
                <div id="timer-display">0</div>
                <button id="start-timer">开始计时</button>
                <button id="stop-timer">停止计时</button>
            </div>

            <div class="video-container">
                <h3>视频测试</h3>
                <video id="test-video" width="400" controls>
                    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                    您的浏览器不支持视频标签。
                </video>
            </div>
        </div>
    </div>

    <!-- 加载speed.js脚本 -->
    <!--<script src="js/speed.js"></script>-->

    <script>
        // 初始化变量
        let timerInterval = null;
        let timerValue = 0;
        const timerDisplay = document.getElementById('timer-display');
        const testVideo = document.getElementById('test-video');

        // 计时器测试
        document.getElementById('start-timer').addEventListener('click', function() {
            if (timerInterval) clearInterval(timerInterval);
            timerValue = 0;
            timerDisplay.textContent = timerValue;

            timerInterval = setInterval(function() {
                timerValue++;
                timerDisplay.textContent = timerValue;
            }, 1000);
        });

        document.getElementById('stop-timer').addEventListener('click', function() {
            if (timerInterval) {
                clearInterval(timerInterval);
                timerInterval = null;
            }
        });

        // 确保speed.js的控件正常显示
        window.addEventListener('load', function() {
            // 确保speed.js控件可见
            setTimeout(function() {
                const controls = document.querySelector('._th_cover-all');
                if (controls && controls.classList.contains('_th_hidden')) {
                    controls.classList.remove('_th_hidden');
                }
            }, 1000);
        });
    </script>
</body>
</html>
